<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Require Vue</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bulma.css" />
  <style>
    .component-fade-enter-active,
    .component-fade-leave-active
    {
      transition: opacity .3s ease;
    }

    .component-fade-enter,
    .component-fade-leave-to
    {
      opacity: 0;
    }
    .pictured-big {
      background-image:  url("img/1.jpg");
      background-size: 100%;
    }
  </style>
</head>

<body>
  <div id="app" class="container is-fluid  pictured-big">
    <div class="tabs">
      <ul>
        <li>Started at: {{started}}</li>
        <router-link tag="li" active-class="is-active" to="/home"><a>Home</a></router-link>
        <router-link tag="li" active-class="is-active" to="/inner"><a>Inner Template</a></router-link>
        <router-link tag="li" active-class="is-active" to="/html"><a>HTML component</a></router-link>
        <router-link tag="li" active-class="is-active" to="/vue"><a>Vue component</a></router-link>
        <router-link tag="li" active-class="is-active" to="/async"><a>Async loaded</a></router-link>
      </ul>
    </div>
    <div class="column is-half">
      <transition name="component-fade" mode="out-in">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
  </div>
  <script data-main="app" src="js/require.js"></script>
</body>

</html>
